<template>
	<div class="tem-card">
		<el-card shadow="always" class="card">
			<el-button type="primary" size="small" plain @click="add">添加{{ type === 'questions' ? '问答' : '话题' }}</el-button>

			<el-table ref="multipleTable" class="table" :data="tableData">
				<el-table-column label="序号" type="index" width="50"> </el-table-column>
				<el-table-column :label="type === 'questions' ? '问答标题' : '话题标题'" prop="title" align="center"></el-table-column>
				<el-table-column label="标签名称" prop="label_name" align="center"></el-table-column>
				<el-table-column label="状态" width="100" align="center">
					<template slot-scope="scope">
						<el-tag size="medium" class="tag_label" effect="dark" :type="scope.row.state ? 'success' : 'info'">
							{{ scope.row.state | filterState }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="允许评论" width="100" align="center">
					<template slot-scope="scope">
						<el-tag size="medium" style="border-radius: 14px" effect="dark" :type="scope.row.is_answer ? 'success' : 'info'">{{
							scope.row.is_answer | filterIs_answer
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="photo" label="头像" align="center">
					<template slot-scope="scope">
						<div class="staff">
							<el-avatar :src="scope.row.photo" size="medium"></el-avatar>
							<span>{{ scope.row.nickname }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="发布时间" width="160" align="center"></el-table-column>
				<el-table-column prop="sort" label="排序" align="center"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" class="btn" @click="look(scope.row.id)" plain>查看</el-button>
						<el-button type="danger" size="mini" class="btn" @click="del(scope.row.id)" plain>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script>
export default {
	props: ['tableData', 'type'],
	name: 'ht_wd_list',
	data() {
		return {};
	},
	methods: {
		add() {
			this.$emit('add');
		},
		async del(id) {
			await this.$confirm('确定删除该数据?', '提示', { type: 'warning' });
			this.$emit('del', id);
		},
		look(id) {
			this.$emit('look', id);
		},
	},
};
</script>

<style scoped>
.card {
	padding: 20px;
}

.table {
	padding-top: 20px;
}

.tag_label {
	border-radius: 14px;
}
.cell{
/* 强制一行显示*/
 white-space: nowrap !important;
 /* 溢出隐藏 */
 overflow: hidden !important;
/* 溢出部分变成... */
text-overflow: ellipsis !important;
}
</style>
